<template>
    <view class="xilu">
        <!-- 顶部蓝色背景区域 -->
        <view class="bg-block"></view>
        
        <!-- 顶部导航栏 -->
        <u-navbar :safeAreaInsetTop="true" :fixed="true" :leftIconSize="0" bgColor="transparent">
            <!-- 为了保持空间，这里不放内容 -->
        </u-navbar>
        
        <!-- 顶部搜索区域 -->
        <view class="search-container">
            <view class="search-box" @click="navigateTo('/pages/search_result/search_result')">
                
                <text class="search-placeholder">输入关键字搜索</text>
                <view class="search-btn">搜索</view>
            </view>
        </view>
        
        
        
        <!-- 顶部可爱角色图片 -->
        <view class="banner-card">
            <!-- <image src="/static/images/bg.png" mode="aspectFill"></image> -->
			<image :src="bannerList[0]['thumb_image']" mode="aspectFill"></image>
        </view>
        
        <!-- 导航菜单 -->
        <view class="nav-menu">
            <view class="nav-item active">我的服务</view>
            <view class="nav-item">我的服务</view>
            <view class="nav-item">我的服务</view>
        </view>
        
        <!-- 服务卡片区域 -->
        <view class="service-cards">
            <!-- 谷子市场卡片 -->
            <view class="service-card blue-card" @click="productMore()">
                <view class="card-content">
                    <view class="card-title">谷子市场</view>
                    <view class="card-button">立即查看</view>
                </view>
                <image class="card-image" src="/static/images/market_avatar.png" mode="aspectFill"></image>
            </view>
            
            <!-- 约妆卡片  bindGoodsList  -->
            <view class="service-card pink-card" @click="bindGoodsList(3)">
                <view class="card-content">
                    <view class="card-title">约妆</view>
                    <view class="card-button pink-button">点击预约</view>
                </view>
                <image class="card-image" src="/static/images/makeup_avatar.png" mode="aspectFill"></image>
            </view>
        </view>
        
        <!-- 活动横幅  @click="navigateTo('/pages/event/event')"-->
        <view class="event-banner" >
            <!-- <image src="/static/images/bg2.png" mode="aspectFill"></image> -->
			<image :src="bannerList[1]['thumb_image']" mode="aspectFill"></image>
        </view>
        
        <Footer :footState="1" :num="messageCount"></Footer>
    </view>
</template>

<script>
    import Footer from "@/components/footer/footer.vue";
    const chatIM = require('../../xilu/chat.js');
    export default {
        components: {
            Footer
        },
        data() {
            return {
                messageCount: 0,
				bannerList: [],
            };
        },
        onLoad() {
            let page = this;
            uni.$on("unread_count", function(data) {
                page.messageCount = getApp().globalData.chat_config.messageCount
            });
            if (getApp().globalData.chat_config.SocketTask) {
                // chatIM.setMessageBadge(false)
            }
			//2.轮播图
			this.fetchBanner();
        },
        onUnload() {
            uni.$off("unread_count");
        },
        onShareAppMessage() {
            
        },
        onShareTimeline() {
            
        },
        methods: {
			productMore() {
			    uni.navigateTo({
			        url: '/pages/goods_list/goods_list'
			    })
			},
			
			//更多二手
			bindGoodsList(id){
				uni.navigateTo({
					url: '/pages/goods_list/goodsfw_list?category_id='+id
				})
			},
			//轮播图
			fetchBanner() {
			    this.$core.get({
			        url: 'xilumarket.banner/banners',
			        data: {
			            group: 'manzhan'
			        },
			        loading: false,
			        success: ret => {
			            this.bannerList = ret.data;
			        }
			    })
			},
            navigateTo(url) {
                uni.navigateTo({
                    url: url
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        min-height: 100vh;
        background-color: #F7F9FC;
        padding-bottom: 120rpx;
        
        // 顶部蓝色背景区
        .bg-block {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 450rpx;
            background: linear-gradient(180deg, #6F9EE8 0%, rgba(111, 158, 232, 0.8) 100%);
            z-index: 1;
        }
        
        // 搜索区域
        .search-container {
            position: relative;
            z-index: 2;
            padding: 30rpx;
            align-items: center;
            margin-top: calc(var(--status-bar-height) + 130px); // 将搜索框下移，从原来的110px增加到130px
            
            .search-box {
                height: 65rpx; // 缩减高度
                background: #FFFFFF;
                border-radius: 32.5rpx; // 调整圆角以匹配新高度
                display: flex;
                align-items: center;
                padding: 0 12rpx 0 24rpx; // 适当调整内边距
                position: relative;
                
                .search-icon {
                    width: 32rpx; // 略微缩小图标
                    height: 32rpx;
                    margin-right: 10rpx;
                    
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                
                .search-placeholder {
                    color: #999;
                    font-size: 26rpx; // 缩小字体
                    flex: 1;
                }
                
                .search-btn {
                    width: 90rpx; // 缩小按钮宽度
                    height: 50rpx; // 缩小按钮高度
                    line-height: 50rpx;
                    background: #87CEEB; // 改为天蓝色
                    color: #FFFFFF;
                    border-radius: 25rpx;
                    text-align: center;
                    font-size: 22rpx; // 缩小字体
                }
            }
        }
        
        // 主横幅
        .main-banner {
            position: relative;
            z-index: 2;
            margin: 20rpx 30rpx;
            height: 300rpx;
            border-radius: 20rpx;
            overflow: hidden;
            
            image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
            }
        }
        
        // 顶部卡片横幅
        .banner-card {
            position: relative;
            z-index: 2;
            height: 300rpx; // 增加高度使图片显示更完整
            width: 690rpx; // 固定宽度以便居中
            margin: 10rpx auto 30rpx; // 顶部距离减少到10rpx(约5px)，底部保持30rpx
            border-radius: 20rpx; // 圆角效果
            overflow: hidden; // 确保内容不超出圆角
            box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1); // 添加阴影效果，创造悬浮感
            
            image {
                width: 100%;
                height: 100%;
                object-fit: cover; // 确保图片填满容器且不变形
            }
        }
        
        // 导航菜单
        .nav-menu {
            display: flex;
            padding: 20rpx 30rpx 30rpx;
            position: relative;
            z-index: 2;
            
            .nav-item {
                margin-right: 40rpx;
                font-size: 32rpx;
                color: #999;
                position: relative;
                
                &.active {
                    color: #333;
                    font-weight: bold;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -10rpx;
                        left: 0;
                        width: 30rpx;
                        height: 6rpx;
                        background: #F9C022;
                    }
                }
            }
        }
        
        // 服务卡片
        .service-cards {
            display: flex;
            padding: 0 30rpx;
            position: relative;
            z-index: 2;
            
            .service-card {
                flex: 1;
                height: 200rpx;
                border-radius: 20rpx;
                padding: 30rpx;
                display: flex;
                position: relative;
                overflow: hidden;
                
                &.blue-card {
                    background: linear-gradient(135deg, #8EB4F5 0%, #4A90E2 100%);
                    margin-right: 15rpx;
                }
                
                &.pink-card {
                    background: linear-gradient(135deg, #FFA9D0 0%, #FF6EB5 100%);
                    margin-left: 15rpx;
                }
                
                .card-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    z-index: 2;
                    
                    .card-title {
                        font-size: 36rpx;
                        color: #333; // 改为黑色
                        font-weight: bold;
                        margin-bottom: 15rpx; // 增加与按钮的间距
                    }
                    
                    .card-button {
                        width: 130rpx; // 缩小宽度
                        height: 50rpx; // 缩小高度
                        line-height: 50rpx;
                        background: #4A90E2; // 修改为蓝色背景
                        color: #FFFFFF; // 修改为白色文字
                        border-radius: 25rpx;
                        text-align: center;
                        font-size: 22rpx; // 缩小字号
                        margin-top: -10rpx; // 让按钮向上靠近文字
                        
                        &.pink-button {
                            background: #FF6EB5; // 修改为粉色背景
                            color: #FFFFFF; // 修改为白色文字
                        }
                    }
                }
                
                .card-image {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 150rpx;
                    height: 150rpx;
                    z-index: 1;
                }
            }
        }
        
        // 活动横幅
        .event-banner {
            margin: 30rpx;
            height: 300rpx; // 与上面的banner-card保持一致的高度
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;
            z-index: 2;
            box-shadow: 0 10rpx 30rpx rgba(183, 189, 202, 0.1); // 添加轻微阴影效果，与上方卡片保持视觉一致性
            
            image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
                object-fit: cover; // 确保图片填满容器且不变形
            }
        }
    }
</style>